<template>
  <div class="articleList-views">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in articleList"
          :key="item.art_id.toString()"
          @click="toDetails(item.art_id.toString())">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ item.title }}</span>
          </template>
          <template #label>
            <!-- column-num：表示多少列，和图片是对应的 多少列多少图片  -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item v-for="(img, index) in item.cover.images" :key="index">
                <!-- 图片懒加载 -->
                <van-image lazy-load :src="img" />
              </van-grid-item>
            </van-grid>
            <div class="commentInfo">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <!-- 相对时间处理 因为vue3.0 已经不在支持过滤器了，所以这里可以在methods里写方法代替，在插值表达式里，是函数执行的return值-->
              <span>{{ _formatTime(item.pubdate) }}</span>
              <!-- 叉号 会有事件冒泡的问题 -->
              <span class="close" @click.stop="openSetAryicle(item.art_id.toString())">
                <van-icon name="cross"></van-icon>
              </span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹出层 -->
    <van-popup v-model="showMoreAction" get-container="body"  :style="{ width: '80%' }">
      <!-- 封装的弹层内容组件 -->
      <more-action ref="MoreAction" @dislikeClick="dislikeClick" @inform="clickInform"></more-action>
    </van-popup>
  </div>
</template>

<script>
// 引入封装好的 文章接口
import { getArticleList, dislikeArticle, reportArticle } from '@/api/article'
// 引入弹层内容组件
import MoreAction from './MoreAction'
export default {
  name: 'ArticleList',
  components: {
    MoreAction
  },
  props: {
    // 父组件传来的当前频道对象
    myChannel: {
      type: Object
    }
  },
  data () {
    return {
      articleList: [],
      loading: false, // 上拉是否正在加载中
      finished: false, // 上拉是否一结束
      isLoading: false, // 控制下拉是否在加载中
      showMoreAction: false, // 控制弹层是否显示
      tsArticleId: null // 暂存文章id
    }
  },
  methods: {
    // 获取文章列表
    hGetArticleLists () {
      // 频道id， 当前时间戳
      getArticleList(this.myChannel.id, new Date().getTime()).then(res => {
        // 拿到的新数据
        const newList = res.data.data.results
        // 把新数据拼接到旧数组的后面
        this.articleList = [...this.articleList, ...newList]
        // 完成后把加载状态赋值为false不加载
        this.loading = false
        // 通知 onLoad 没有数据了结束上拉  newList.length 就是一个条件，新数组长度小于零，则表示没有数据了
        if (newList.length < 0) {
          this.finished = true
        }
      })
    },
    // 控制上拉 数据添加
    onLoad () {
      this.hGetArticleLists()
    },
    // 控制下拉的 数据渲染
    onRefresh () {
      // 频道id， 当前时间戳
      getArticleList(this.myChannel.id, new Date().getTime()).then(res => {
        // 完成后把加载状态赋值为false不加载
        this.isLoading = false
        // 拿到的新数据
        const newList = res.data.data.results
        // 把新数据拼接到旧数组的最前面
        this.articleList = [...newList, ...this.articleList]
        // 下拉提示
        this.$toast.success(`成功加载${newList.length}条数据`)
      })
    },
    // 点击弹出弹层
    openSetAryicle (id) {
      this.showMoreAction = true
      // 把id放入暂存里去
      this.tsArticleId = id
      // 每次打开弹出的时候，状态初始化
      this.$refs.MoreAction.isReport = false
    },
    // 不感兴趣文章 接收子组件传递过来的方法
    dislikeClick () {
      dislikeArticle(this.tsArticleId).then(res => {
        // console.log(res)
      })
      // 关闭弹层
      this.showMoreAction = false
      // 在文章列表里遍历，把当前的id对应的文章，从文章列表中删除
      this.articleList.forEach((article, index) => {
        if (article.art_id.toString() === this.tsArticleId) {
          this.articleList.splice(index, 1)
        }
      })
    },
    // 举报 接收子组件传递过来的方法
    clickInform (type) {
      console.log(1)
      reportArticle(this.tsArticleId, type).then(res => {
        // console.log(res)
      })
      // 关闭弹层
      this.showMoreAction = false
      // 根据当前id，删除文章列表中对应的文章id的数据
      this.articleList.forEach((article, index) => {
        if (article.art_id.toString() === this.tsArticleId) {
          this.articleList.splice(index, 1)
        }
      })
    },
    // 跳转到文章详情
    toDetails (id) {
      this.$router.push({
        path: '/articleDetails',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.articleList-views {
  .commentInfo {
    display: flex;
  }
  .commentInfo span {
    margin-right: 20px;
  }
  // 小叉号
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left:auto;
  }
}
</style>
